<template>
  <!-- 用户统计 -->
  <div class="userStatistics">
    <div class="left">
      <span class="iconUserLeft">
        <i class="el-icon-odometer"></i>
      </span>
      <span class="userTextLeft">水表数（只）</span>
      <span class="userNumLeft">{{uses}}</span>
    </div>
    <div class="right">
      <span class="iconUserRight"> <i class="el-icon-stopwatch"></i></span>
      <span class="userTextRight">停用表（只）</span>
      <span class="userNumRight">{{disabledUse}}</span>
    </div>
  </div>
</template>

<script>
import { waterNums } from '@/api/revenueHome/index'

export default {
  name: 'waterStatistics',
  data() {
    return {
      uses: '',
      disabledUse: '',
    }
  },
  methods: {
    async getCountNum() {
      const res = await waterNums()
      this.uses = (res && res.data && res.data.tolNum) || 0
      this.disabledUse = (res && res.data && res.data.zxNum) || 0
    },
  },
  created() {
    this.getCountNum()
  },
}
</script>

<style lang='scss' scoped>
.icon {
  border: 1px dashed #fff;
}
.userStatistics {
  width: 100%;
  font-size: 21.31px;
  display: flex;
}
.left {
  flex: 1;
}
.right {
  flex: 1;
}
.iconUserLeft,
.iconUserRight {
  display: inline-block;
  position: relative;
  margin-top: 30px;
  width: 45px;
  height: 45px;
  i {
    font-size: 55px;
  }
}
.iconUserLeft i {
  color: #0b9ac3;
}
.iconUserRight i {
  color: #c00303;
}
.userTextLeft {
  display: inline-block;
  position: absolute;
  left: 75px;
  top: 65px;
  font-size: 17.04px;
}
.userNumLeft {
  display: inline-block;
  position: absolute;
  left: 75px;
  top: 88px;
  color: #0b9ac3;
  font-size: 21.31px;
}
.userTextRight {
  display: inline-block;
  position: absolute;
  left: 64%;
  top: 65px;
  font-size: 17.04px;
}
.userNumRight {
  display: inline-block;
  position: absolute;
  left: 64%;
  top: 88px;
  color: #c00303;
  font-size: 21.31px;
}
@media screen and (max-width: 767px) {
  .iconUserLeft,
  .iconUserRight {
    width: 30px !important;
    height: 30px !important;
  }
  .userTextLeft {
    font-size: 15.04px;
  }
  .userNumLeft {
    font-size: 19.31px;
  }
  .userTextRight {
    font-size: 15.04px;
  }
  .userNumRight {
    font-size: 19.31px;
  }
}
@media screen and (min-width: 768px) {
  .iconUserLeft,
  .iconUserRight {
    width: 30px !important;
    height: 30px !important;
  }
  .userTextLeft {
    font-size: 15.04px;
  }
  .userNumLeft {
    font-size: 19.31px;
  }
  .userTextRight {
    font-size: 15.04px;
  }
  .userNumRight {
    font-size: 19.31px;
  }
}
@media screen and (min-width: 992px) {
  .iconUserLeft,
  .iconUserRight {
    width: 30px !important;
    height: 30px !important;
  }
  .userTextLeft {
    font-size: 15.04px;
  }
  .userNumLeft {
    font-size: 19.31px;
  }
  .userTextRight {
    font-size: 15.04px;
  }
  .userNumRight {
    font-size: 19.31px;
  }
}
@media screen and (min-width: 1200px) {
  .iconUserLeft,
  .iconUserRight {
    width: 34px !important;
    height: 34px !important;
  }
  .userTextLeft {
    font-size: 17.04px;
  }
  .userNumLeft {
    font-size: 21.31px;
  }
  .userTextRight {
    font-size: 17.04px;
  }
  .userNumRight {
    font-size: 21.31px;
  }
}
</style>
